<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{userName}}111</h2>
    <Button @click="change">改变姓名</Button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Action, namespace} from "vuex-class";
const someModule = namespace('demo');
@Component
export default class HelloWorld extends Vue {
    @someModule.State(state => state.userName) userName: any;
    @someModule.Action('setName') setName: any;
    @Action("demo/getIview") private getIview: any;
    // @Action("demo/setName") private setName: any; // 改变姓名
    @Prop() private msg!: string;

    // @Action("setName") private setName: any;
    // @Mutation("SET_USER") private setUser:any;Mutation和action类似用法，只需要引入调用即可
    // @Getter('getUser') private user:any;//和state一样的用法，获取后返回一个state数据
    private change() {
        this.setName('浏览量')
    }
}
</script>

<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
